import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Provier from 'postcss-px-to-viewport'

/**
 * Vite配置文件
 * 功能：配置开发服务器、代理、CSS处理等
 * 参考：https://vite.dev/config/
 */
export default defineConfig({
  // React插件配置
  plugins: [react()],
  
  // 开发服务器配置
  server: {
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://10.59.9.18/health', // 后端API服务器地址
        changeOrigin: true, // 改变请求头中的origin
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，移除/api前缀
      }
    }
  },
  
  // CSS处理配置
  css: {
    postcss: {
      plugins: [
        // px转vw插件配置（移动端适配）
        Provier({
          unitTconvert: 'px', // 需要转换的单位
          viewportWidth: 375, // 设计稿宽度（iPhone 6/7/8）
          unitPrecision: 5, // 转换后的精度
          propList: ['*'], // 需要转换的属性列表
          viewportUnit: 'vw', // 转换后的视口单位
          fontViewportUnit: 'vw', // 字体转换后的视口单位
          selectorBlackList: [], // 忽略的选择器列表
          minPixelValue: 1, // 最小转换像素值
          mediaQuery: false, // 是否在媒体查询中转换px
          replace: true, // 是否替换包含vw的规则
          exclude: [], // 忽略的文件列表
          landscape: false, // 是否处理横屏
          landscapeUnit: 'vw', // 横屏时的单位
          landscapeWidth: 568 // 横屏时的视口宽度
        })
      ]
    }
  }
})
